<template>
  <v-chart
    :options="option"
    :autoresize="true"
    theme="chartsTheme"
  />
</template>
<script>
/*
便利店进店人次，服务人次对比
*/
import constData from '@/util/constData' // 保存的常量
import axios from 'axios'
import dayjs from 'dayjs'

export default {
  props: {
    // servicePersonsData: {
    //   type: Array
    // },
    // serviceCarsData: {
    //   type: Array
    // },
    // axisDataList: {
    //   type: Array
    // }
  },
  data() {
    return {
      axisDataList: [],
      xianData: [],
      yulinData: [],
      yananData: [],
      xianyangData: [],
      hanzhongData: [],
      option: {
        color: ["#19be6b", "#ff9900"],
        title: {
          text: "分公司综合评分变化趋势"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["西安", "榆林", "延安", "咸阳", "汉中"]
        },
        toolbox: {
          show: true,
          feature: {
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {}
          }
        },
        grid: {
          left: '4%',
          right: '6%'
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: this.axisDataList,
        },
        yAxis: [{
          type: "value",
          // name: '评分',
          // nameGap: 10,
          min: 70,
          // max: 100,
          axisLabel: {
            formatter: "{value}"
          }
        }],
        series: [
          {
            name: "西安",
            type: "line",
            data: this.xianData,
            label: {
              show: false
            }
          },
          {
            name: "榆林",
            type: "line",
            data: this.yulinData,
            label: {
              show: false
            }
          },
          {
            name: "延安",
            type: "line",
            data: this.yananData,
            label: {
              show: false
            }
          },
          {
            name: "咸阳",
            type: "line",
            data: this.xianyangData,
            label: {
              show: false
            }
          },
          {
            name: "汉中",
            type: "line",
            data: this.hanzhongData,
            label: {
              show: false
            }
          }
        ]
      }
    }
  },
  watch: {
    xianData: {
      deep: true,
      handler (value) {
        // console.log('进店人次新的值：', value)
        this.option.series[0].data = value
      }
    },
    yulinData: {
      deep: true,
      handler (value) {
        // console.log('服务人次新的值：', value)
        this.option.series[1].data = value
      }
    },
    yananData: {
      deep: true,
      handler (value) {
        // console.log('服务人次新的值：', value)
        this.option.series[2].data = value
      }
    },
    xianyangData: {
      deep: true,
      handler (value) {
        // console.log('服务人次新的值：', value)
        this.option.series[3].data = value
      }
    },
    hanzhongData: {
      deep: true,
      handler (value) {
        // console.log('服务人次新的值：', value)
        this.option.series[4].data = value
      }
    },
    axisDataList: {
      deep: true,
      handler (value) {
        this.option.xAxis.data = value
      }
    }
  },
  created () {

    this.startTime = dayjs().subtract(30, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')
    this.endTime = dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss')
    for(let i=30; i>0; i--) {
      this.axisDataList.push(dayjs().subtract(i, 'day').startOf('day').format('MM-DD'))
      this.xianData.push(Math.round(Math.random()*2)+85)
      this.yulinData.push(Math.round(Math.random()*2)+82)
      this.yananData.push(Math.round(Math.random()*2)+80)
      this.xianyangData.push(Math.round(Math.random()*2)+78)
      this.hanzhongData.push(Math.round(Math.random()*2)+75)
    }
    console.log(this.xianData)

  },
  methods: {
    // 获取便利店服务人次，及服务车辆数
    getCheckOutData(groupType, interval, start_time, end_time, station, category) {
      axios.get('http://10.202.5.9:5123/datacenter/service/statistic', {
        params: {
          group: groupType,
          interval,
          start_time,
          end_time,
          station,
          category
        }
      }).then((res) => {
        // console.log('主页---------便利店服务人次查询：', res)
        // let checkoutResData = res.data.data
        // this.countData[0].value = checkoutResData.count_all + ' 人'
      })
    },
    // 获取分公司加油区服务车辆
    getServiceCarsData(groupType, interval, start_time, end_time, station, category) {
      console.log('getServiceCarsData', start_time, end_time, station, category)

      axios.get('http://10.202.5.9:5123/datacenter/service/statistic', {
        params: {
          group: groupType,
          interval,
          start_time,
          end_time,
          station,
          category,
          channel: '4'
        }
      }).then((res) => {
        // console.log('主页=========加油区服务车辆查询：', res.data.data)
        let resData = res.data.data

      })
    },
  }
}
</script>

<style lang="less">
</style>

